<template>
    <div class="app-container">
      <el-row :gutter="20">
        <!--课程数据-->
        <el-col :span="24" :xs="24">
          <el-form :rules="queryForm" ref="queryForm" :model="queryForm" size="small" :inline="true" label-width="68px">

            <!-- <el-form-item label="教练名称" prop="coachName">
            <el-input v-model="queryForm.coachName" placeholder="请输入教练名称" clearable style="width: 240px" />
          </el-form-item>
  
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="Listload">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
            </el-form-item> -->
          </el-form>
  
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <!-- <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handelAdd">新增</el-button> -->
            </el-col>
          </el-row>
  
          <el-table :data="tableData" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column label="案例所属教练" align="center" prop="coachName" :show-overflow-tooltip="true" />
            <el-table-column label="案例学员姓名" align="center" prop="studentName" :show-overflow-tooltip="true" />
            <el-table-column prop="content" align="center" label="案例内容" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                <el-button @click="view(scope.row)" type="primary">查看详细</el-button>
            </template>
            </el-table-column>
          </el-table>
          <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryForm.pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :limit.sync="queryForm.pageSize"
        @pagination="Listload"
      />
        </el-col>
      </el-row>

      <el-dialog :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="案例图片" prop="actionImage">
          <div v-for="(outerItem, outerIndex) in shuzu" :key="outerIndex" style="width: 100%; height: 100%; display: flex; flex-wrap: wrap; align-items: flex-start; margin-bottom: 15px;">
            <div v-for="(innerItem, innerIndex) in outerItem.group" :key="innerIndex" style="box-sizing: border-box; width: 30%; height: 50%; padding-left: 15px; flex: 0 0 50%;">
              <span style="padding-bottom: 15px;">{{ outerItem.time }}</span>
              <img :src="'http://101.43.223.224:8765/image/getImageById?id=' + innerItem.actionImage" style="width: 90%; height: 200px; border-radius: 5px; margin-bottom: 15px;">
            </div>
          </div>
        </el-form-item>
        <!--  -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open = false">返回</el-button>
      </div>
    </el-dialog>
    </div>
  </template>
  <script>
  
  import { listCaseRecord ,listCaseRecord1,listCaseRecord2} from "@/api/caseRecord/case/index.js"; // 导入课程接口
  import { list } from "@/api/monitor/logininfor";
  import { param } from "@/utils";
  import moment from 'moment';
  
  export default {
    name: 'Course',
    data() {
      return {
        shuzu:[],
        xinform:{
          time:"",
          group:[]
        },
        uniqueDatesArray:[

        ],
        // 课程数据
        tableData: [],
        // 案例数组
        caseData:[],
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        multipleSelection: [],
        // 是否显示弹出层
        open: false,
        // 总条数
        total: 0,
        // 图片回显
        actionImage: "",
        images: [], // 存储用户的所有图片的数组
        times:[],
        //添加时赋值
        addimages: "",
        // 表单参数
        form: {},
        // 场馆下拉框
        venues: [],
        // 教练下拉框
        coachs: [],
        // 课程类型下拉框
        fitness: [],
        // 课程查询条件
        queryForm: {
          pageNum: 1,
          pageSize: 10,
          coachName: '',
          venueUniqueIdentifier: window.sessionStorage.getItem('venueUniqueIdentifier')
          
        },
        queryParams: {
          userId: 0,
          
        },
        queryParamss: {
          time:"",
          userId:0,
        },
        // 表单验证规则
        rules: {
  
        },
        
      }
    },
    created() {
      this.Listload();
    },
    methods: {
      getStatusLabel(status) {
          switch (status) {
              case "0":
                  return "待预约";
              case "1":
                  return "待训练";
              case "2":
                  return "进行中";
              case "3":
                  return "已完成";
              default:
                  return "";
          }
      },
      /** 查询课程列表 */
      Listload() {
        listCaseRecord(this.addDateRange(this.queryForm)).then(res => {
          console.log(this.tableData);
          // 将案例按学员ID分组
          const groupedCases = res.data.content.reduce((result, currentCase) => {
            const userId = currentCase.userId;
            if (!result[userId]) {
              result[userId] = [currentCase];
            } else {
              result[userId].push(currentCase);
            }
            return result;
          }, {});

          // 将每个学员的第一个案例显示在表格中
          const formattedTableData = Object.values(groupedCases).map(cases => cases[0]);

          this.tableData = formattedTableData;
          this.total = formattedTableData.length; // 如果需要显示每个学员一个案例，总数即为学员数
          this.caseData = res.data.content;
          // 把每个学员的
        });
      },
      view(row) {
        this.shuzu=[]
        this.xinform={
          time:"",
          group:[]
        },
  console.log(row.userId);
  this.queryParams.userId = row.userId;

  listCaseRecord1(this.addDateRange(this.queryParams)).then((response) => {
    this.images = response.data;

    const uniqueDates = new Set();
    this.images = this.images.filter((item) => {
      const originalDate = new Date(item.createTime);
      const formattedDate = `${originalDate.getFullYear()}-${(originalDate.getMonth() + 1).toString().padStart(2, '0')}-${originalDate.getDate().toString().padStart(2, '0')}`;

      if (!uniqueDates.has(formattedDate)) {
        uniqueDates.add(formattedDate);
        return true;
      }

      return false;
    });

    // 将 Set 转换为数组
    this.uniqueDatesArray = Array.from(uniqueDates);
    for (let i = 0; i < this.uniqueDatesArray.length; i++) {
  // 创建一个新的对象，确保每次循环都是不同的对象
  const currentXinform = {
    time: "",
    group: [],
  };

  const currentDate = this.uniqueDatesArray[i];
  this.queryParamss.time = currentDate
  currentXinform.time = currentDate
  console.log(currentDate);
  this.queryParamss.userId = this.queryParams.userId
  listCaseRecord2(this.addDateRange(this.queryParamss)).then((response) => {
    currentXinform.group = response.data
    this.shuzu.push(currentXinform)
    console.log(this.shuzu)
  });
}
    console.log(this.images);
    console.log(this.uniqueDatesArray);
  });

  this.open = true;
},
      /** 选中表格 */
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id);
        this.single = selection.length != 1;
        this.multiple = !selection.length;
      },
      /** 重置查询条件 */
      reset() {
          this.queryForm.coachName = ""
          this.Listload()
      },
      /** 分页 */
      handleSizeChange(pageSize){
        console.log(pageSize);
        this.pageSize = pageSize;
        this.Listload();
      },
      handleCurrentChange(pageNum){
        console.log(pageNum);
        this.pageNum = pageNum;
        this.Listload();
      },
    },
  
  }
  </script>